<template>
  <div>
    <!---搜索栏 -->
    <div style="display: inline-block">
      <el-select v-model="dateValue" clearable placeholder="全部时间"
          @change="timeSearch()" style="margin:0 25px 5px 0" >
          <el-option v-for="item in options"  :key="item.value" :label="item.label" :value="item.value">
          </el-option>
      </el-select>
      <el-date-picker
          v-model="valueTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="submitDateTime()"
          style="margin-right: 50px;">
      </el-date-picker>
      <el-input v-model="name" placeholder="请输入名称" style="width: 100px; margin:0 5px 5px 0"/>
      <el-button @click="load()" style="margin:0 5px 5px 0" type="primary">
        <el-icon style="vertical-align: middle">
          <Search />
        </el-icon>
        <span style="vertical-align: middle"> 搜索 </span>
      </el-button>
      <el-button @click="reset()" style="margin:0 50px 5px 0" type="warning">
        <el-icon style="vertical-align: middle">
          <RefreshLeft />
        </el-icon>
        <span style="vertical-align: middle"> 重置 </span>
      </el-button>
    </div>
    <div>
      <el-button style="margin:0 30px 0 0" @click="handleAdd" type="success">
        <el-icon style="vertical-align: middle">
          <Plus />
        </el-icon>
        <span style="vertical-align: middle"> 新增 </span>
      </el-button>
      <el-popconfirm
          class="ml-5"
          confirm-button-text='确定'
          cancel-button-text='算了'
          icon="el-icon-info"
          icon-color="red"
          title="您确定批量删除这些数据吗？"
          @confirm="delBatch"
      >
        <template #reference>
          <el-button type="danger">批量删除 <i class="el-icon-remove-outline"></i></el-button>
        </template>
      </el-popconfirm>
    </div>
    <!---表单 -->
    <div style="margin:10px 0">
      <el-table :data="tableData" stripe border @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" prop="id" label="ID" ></el-table-column>
        <el-table-column align="center" prop="name" label="名称"></el-table-column>
        <el-table-column align="center" prop="range" label="范围"></el-table-column>
        <el-table-column align="center" prop="date" label="时间"></el-table-column>

        <el-table-column align="center" label="操作" width="180px">
            <template #default="scope">
              <el-button @click="handleEdit(scope.row)" type="primary">编辑</el-button>
              <el-popconfirm
                style="margin: 5px"
                confirm-button-text='确定'
                cancel-button-text='算了'
                title="您确定删除吗？"
                @confirm="del(scope.row.id)"
              >
                <template #reference>
                  <el-button type="danger">删除 <i class="el-icon-remove-outline"></i></el-button>
                </template>
              </el-popconfirm>
            </template>
        </el-table-column>
      </el-table>
      <!---分页组件 -->
      <div style="margin:10px 0">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            v-model:current-page="pageNum"
            v-model:page-size="pageSize"
            :page-sizes="[2, 5, 10, 20,50]"
            large
            layout="total,sizes,prev,pager,next,jumper"
            :total="total"
        />
      </div>
    </div>
  </div>
  <el-dialog title="考试信息"  v-model="dialogFormVisible" width="20%" >
    <el-form label-width="80px">
      <el-form-item label="名称">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="范围">
        <el-input v-model="form.range" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="时间">
        <el-input v-model="form.date" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {Search, RefreshLeft, Plus,} from '@element-plus/icons-vue'
import service from "../../utils/axios";
export default {
  name:"Exam_Msg",
  components:{
    Search,
    RefreshLeft,
    Plus,
  },
  data(){
    return{
      //能拿到数据就注释掉tableData里的固定数据
      tableData: [
        {id:'2022010801',name:'期末考试',range:'高一年级',date:'2022,01,08'},
        {id:'2022102501',name:'期中考试',range:'高二年级',date:'2022,10,25'},
        {id:'2022110201',name:'月考',range:'高一年级',date:'2022,11,02'},
      ],
      name:'',
      username:'',
      email :'',
      address:'',
      pageNum:1,
      pageSize:10,
      total:50,
      dateValue:'',
      valueTime:'',
      dialogFormVisible: false,
      form:{},
      multipleSelection: [],
      options:[{
        value: '1',
        label: '全部时间'
      }, {
        value: '2',
        label: '最近一个月'
      }, {
        value: '3',
        label: '最近半年'
      }, {
        value: '4',
        label: '最近一年'
      }]
    }
  },
  created() {
    //this.load()    //调用load方法拿到后台数据
  },
  methods: {
    // 加载的接口
    // load(){
    //   service.get("/user/page",{
    //     params:{
    //       pageNum: this.pageNum,
    //       pageSize: this.pageSize,
    //       name: this.name,
    //     }
    //   }).then(res=>{
    //     this.tableData=res.data.records
    //     this.total=res.data.total
    //   })
    // },
    reset() {
      this.name = ""
      this.load()
    },
    handleSelectionChange(val){
      this.multipleSelection.value = val
    },

    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      //this.load()
    },

    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      //this.load()
    },
    //删除的接口,用于删除某条单个信息
    // del(id) {
    //   service.delete("/file/" + id).then(res => {
    //     if (res.data.code === '200') {
    //       this.$message.success("删除成功")
    //       this.load()
    //     } else {
    //       this.$message.error("删除失败")
    //     }
    //   })
    // },
    //批量删除的接口，用于将左侧的选中数据一起删除
    // delBatch() {
    //   let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
    //   service.post("/role/del/batch", ids).then(res => {
    //     if (res.data) {
    //       this.$message.success("批量删除成功")
    //       this.load()
    //     } else {
    //       this.$message.error("批量删除失败")
    //     }
    //   })
    // },
    handleAdd() {
      this.dialogFormVisible = true
      this.form = {}
      //this.load()
    },
    handleEdit(row){
      this.form = row
      this.dialogFormVisible = true
    },
    //保存添加的数据项到后台数据库里
    // save() {
    //   service.post("/role/save", this.form).then(res => {
    //     if (res.data) {
    //       this.$message.success("保存成功")
    //       this.dialogFormVisible = false
    //       this.load()
    //     } else {
    //       this.$message.error("保存失败")
    //     }
    //   })
    // },
  }
}

</script>
